@font-face {
  font-family: 'SegoeUI';
  font-style: normal;
  font-weight: 200;
  src: local('Segoe UI Light'), local('SegoeUI-Light');
}

* {
    font-family: 'SegoeUI'; 
}

/*************************************************
	H O M E P A G E
*************************************************/

#logo {
	width: 50px;
	float: left;
	margin-right: 10px;
}

#homePage_content {
	margin-top: 50px;
	width: auto;
	height: auto;
	max-height:	900px;
	text-align: center;
}

#homepage_forum {
	text-align: right;
}

.homepage_bubbles {
	width: 150px;
 }

#homepage_bubbles_left {
	float: right;

}

#homepage_bubbles_right {
	float: left;
}



/*************************************************
	G A L L E R Y
*************************************************/


#listCategorie {
	text-align: center;
}

#listCategorie li {
	display: inline-block;
	padding-left: 25px;
}

#listProduits {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	white-space: nowrap;
	overflow-y: hidden;
	background-color: #fff;
	-moz-box-shadow: 0 0 5px 1px #000;
	-webkit-box-shadow: 0 0 5px 1px #000;
	box-shadow: 0 0 5px 1px #000;
}

#listProduits .item {
  margin: 3px;
}

#listProduits .item p {
	overflow: hidden;
   	text-overflow: ellipsis;
   	text-align: center;
}

#listProduits .item p span {
	color: #FF9900;
	font-weight: bold;
}

#listProduits .item a img {
  display: block;
  width: auto;
  height: 50px;
  margin: 0 auto;
}


/*************************************************
	W E B G L
*************************************************/

canvas {  
	width: 100%;
	height: 100%;
	overflow: hidden;
}

iframe { 
	border: none;
	overflow: hidden;
	width: 400px;
	height: 200px;
	-webkit-box-shadow: 0 0 5px 1px #000;
	box-shadow: 0 0 5px 1px #000;
	padding-right: 8px;
	padding-bottom: 8px;
}

#webglContainer {
	text-align: center;
}


/*************************************************
	U T I L S
*************************************************/


@keyframes shake{ 
0% { transform: translate(2px, 1px) rotate(0deg); } 
10% { transform: translate(-1px, -2px) rotate(-1deg); } 
20% { transform: translate(-3px, 0px) rotate(1deg); } 
30% { transform: translate(0px, 2px) rotate(0deg); } 
40% { transform: translate(1px, -1px) rotate(1deg); } 
50% { transform: translate(-1px, 2px) rotate(-1deg); } 
60% { transform: translate(-3px, 1px) rotate(0deg); } 
70% { transform: translate(2px, 1px) rotate(-1deg); } 
80% { transform: translate(-1px, -1px) rotate(1deg); } 
90% { transform: translate(2px, 2px) rotate(0deg); } 
100% { transform: translate(1px, -2px) rotate(-1deg); } 
} 

@-moz-keyframes shake{ 
0% { -moz-transform: translate(2px, 1px) rotate(0deg); } 
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 
40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } 
} 

@-webkit-keyframes shake { 
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } 
} 

.shake { 
	display:inline-block; 
} 

.shake:hover, 
.shake:focus{ 
animation-name: shake; 
animation-duration: 0.8s; 
transform-origin:50% 50%; 
animation-iteration-count: infinite; 
animation-timing-function: linear; 

-moz-animation-name: shake; 
-moz-animation-duration: 0.8s; 
-moz-transform-origin:50% 50%; 
-moz-animation-iteration-count: infinite; 
-moz-animation-timing-function: linear; 

-webkit-animation-name: shake; 
-webkit-animation-duration: 0.8s; 
-webkit-transform-origin:50% 50%; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
}